<template>
	<view style="display: flex;flex-direction: column;">
		
		<view class="top-layout" @click="requestNameShow=true">
			<text style="font-size: 26rpx;color: #333;">{{requestName}}</text>
			<u-icon name="arrow-right" color="#666666" size="15"></u-icon>
			
		</view>
		
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<!-- :down="downOption" :up="upOption" -->
		
			<uni-list>
		
				<view class="item" v-for="(item, index) in listdata" :key="item.carNo">
		
					<view class="text-line" style="margin-top: 20rpx;">
						<text class="text-name">车牌号:</text>
						<text class="text-value">{{item.carPlateNo|filterNull}}</text>
					</view>
					
					<view class="text-line">
						<text class="text-name">指令名称:</text>
						<text class="text-value">{{item.deviceInstructName|filterNull}}</text>
					</view>
					
					<view class="text-line">
						<text class="text-name">状态:</text>
						<text class="text-value">{{item.sendStatusStr|filterNull}}</text>
					</view>
					
					<view class="text-line">
						<text class="text-name">发送时间:</text>
						<text class="text-value">{{item.sendTime|filterNull}}</text>
					</view>
		
				</view>
			</uni-list>
		
		</mescroll-body>
		
		
		<u-picker :show="requestNameShow" :default-selector="[0]" :columns="requestNameList"
			keyName="name" @confirm="pickerConfim" @cancel="requestNameShow=false"></u-picker>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				requestNameShow:false,
				requestStr:'',
				deviceId:'',
				deviceInstructId:'',
				intentData:{},
				page: 1,
				listdata: [],
				requestNameList:[]
			}
		},
		computed:{
			requestName(){
				return uni.$u.test.isEmpty(this.requestStr)?'请选择指令名称':this.requestStr
			}
		},
		methods: {
			getData() {
			
				this.$u.api.instructionshistorylist({
						pageNo: this.page,
						deviceId: this.deviceId,
						deviceInstructId: this.deviceInstructId,
					}).then(
						res => {
							if (this.page == 1) {

                this.listdata = [];
              }
              this.listdata = this.listdata.concat(res);
              this.mescroll.endSuccess(res.length);
            }
					)
					.catch(() => {
						this.mescroll.endErr();
					})
			},
			
			//picker回调函数
			pickerConfim(e) {
				this.requestNameShow = false
				
				let objc1 = e.value[0];
				this.requestStr = objc1.name;
				this.deviceInstructId = objc1.id;
				
				this.page = 1;
				this.getData();
			},
			
			upCallback(page) {
				console.log("触发了上拉加载" + page);
			
				this.page = page.num;
				this.getData();
			},
			
			
		},
		onLoad(op) {
			this.intentData = getApp().globalData.requestHistory
			getApp().globalData.requestHistory = null
			
			this.requestNameList = [this.intentData]
			this.deviceId = op.deviceId
			
			
			
			console.log('this.intentData===>', this.intentData);
			console.log('this.deviceId===>', this.deviceId);
		},
		
		
	}
</script>

<style lang="scss" scoped>
	
	.top-layout{
		display: flex;
		align-items: center;
		margin: 20rpx;
		border-radius: 10rpx;
		justify-content: space-between;
		background-color: white;
		padding: 20rpx;
	}
	
</style>
